<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
	</head>
	<body>
		<div class="box">
			<com1>
				<!-- 插槽内容 -->
				<p>我是子组件标签包裹的内容</p>
			</com1>
		</div>

		<script src="./scripts/vue.js"></script>
		<script>
			// 在子组件标签中，可以继续填充一些标签或其他内容，将内容展示到子组件标签内部
			// 填充的内容，我们称为插槽内容
			// 在子组件模板中，我们需要定义一个占位符 slot，来展示子组件标签中的内容，这个占位符，我们俗称为插槽

			Vue.component('com1', {
				template: `
          <div>
            <h4>子组件 1</h4>
            <hr>
            <!-- 插槽：默认插槽 -->
            <!-- 注意事项：slot 只是一个占位符，不要在slot标签内写内容，因为会被组件标签内的内容替换掉 -->
            <slot></slot>
          </div>
        `
			})

			var vm = new Vue({
				el: '.box',
				data: {}
			})
		</script>
	</body>
</html>
